<template>
	<view class="findCases">
		<!-- 筛选区域 -->
		<view class="screen delUp" :class="isFixed?'fixed':''" :style="{'top': top +'rpx'}">

			<up-dropdown>
				<!-- 地区 -->
				<!-- 	<up-dropdown-item v-model="params.cat_id" :title="selectedCatLabel1" :options="catListData"
					@change="oncheck1"></up-dropdown-item> -->
				<!-- 风格 -->
				<up-dropdown-item v-model="params.style" :title="selectedCatLabel2" :options="styleListData"
					@change="oncheck2" height="200" />
				<!-- 经验 -->
				<up-dropdown-item v-model="params.work_year" :title="selectedCatLabel3" :options="workListyear"
					@change="oncheck3" height="200" />
			</up-dropdown>
		</view>

		<!-- 列表 -->
		<!-- 没有数据且未加载时的提示 -->
		<view class="nullData" v-if="arrList.length == 0 && !isLoading" :style="isFixed ? {'padding-top': top + 120 +'rpx'} : {'padding-top': 0 +'rpx'}">
			<image src="https://img.zhizhuangtong.com/project_media/img/xcx/null.png" mode=""></image>
			<text>暂无数据</text>
		</view>

		<!-- 数据列表 -->
		<view class="list" v-else :style="isFixed ? {'padding-top': top + 180 +'rpx'} : {'padding-top': 0 +'rpx'}">
			<view class="card" v-for="(item, index) in arrList" :key="item.id">
				<view class="rows" @click="onDetails(item.id)">
					<view class="userAvatar">
						<image src="https://img.zhizhuangtong.com/project_media/img/xcx/avatar.png" class="avatar"
							v-if="item.user?.avatar==''"></image>
						<image :src="item.user?.avatar" class="avatar" v-else></image>

					</view>
					<view class="rightFlex">

						<view class="userInfo">
							<view class="rowCenter">
								<text class="name">{{item.user?.real_name}}</text>
								<text class="number">案例数量：{{item?.case_num}}</text>
								<view class="tag">
									<text class="tags" v-if="item.style_text_arr.length > 0"
										v-for="(ite,ind) in item.style_text_arr" :key="ind">{{ ite }}</text>

								</view>
							</view>
							<view class="rightRow">
								<view class="btns">立即咨询</view>
							</view>
						</view>

						<view class="imageList" v-if="item.case_list">
							<image v-for="(items, indexs) in item.case_list" :key="items.id" :src="items.img"
								class="avatar"></image>
						</view>
					</view>
				</view>
			</view>

		</view>


		<view v-if="isLoading" class="load-more-box">
			<text>加载中...</text>
		</view>

		<view v-if="arrList.length !== 0 && !isLoading && !hasMoreData" class="load-more-box">
			<text>已经到底了</text>
		</view>

	</view>
</template>

<script setup>
	import {
		find_designer,
		service_type_list,
		type_list
		// cityData
	} from '@/api/designerList.js';
	import {
		ref,
		onMounted,
		defineExpose,
		watch,
		defineProps
	} from 'vue';
	// 地区
	const selectedCatLabel1 = ref('全部');
	const catListData = ref([]); // 类型数据

	// 风格
	const selectedCatLabel2 = ref('风格');
	const styleListData = ref([]);

	// 经验
	const selectedCatLabel3 = ref('经验');
	const workListyear = ref([]);

	// 数据列表、加载状态和分页参数
	const arrList = ref([]);
	const hasMoreData = ref(true); // 初始化为true，表示还有更多数据

const porps = defineProps({
	  isFixed: Boolean,
	  top: String
	});
	const params = ref({
		style: "",
		// work_type: "",
		work_year: "",
		// order:'',//排序:0=默认排序,1=需求数量正序,2=需求数量倒序,3=订单数量正序,4=订单数量倒序,5=交易金额正序,6=交易金额倒序,7=好评正序,8=好评倒序,9=经验正序,10=经验倒序
		page: 1,
		page_size: 20,
	});

	const isLoading = ref(false); // 加载状态
	// 初始化数据
	onMounted(() => {
		queryWorkyearData();
		queryStyleeData();
		queryList();
	});

	// 类型数据
	// const queryTypeData = async () => {
	// 	const res = await cat_list({
	// 		pid: pid.value
	// 	});
	// 	if (res.code === 1) {
	// 		catListData.value = res.data.list.map(item => ({
	// 			label: item.name,
	// 			value: item.id,
	// 		}));
	// 	}
	// };

	// 经验
	const queryWorkyearData = async () => {
		const res = await service_type_list({});
		if (res.code === 1) {
			workListyear.value = [{
				label: '全部',
				value: ''
			}, ...res.data.work_year.map(item => ({
				label: item.name,
				value: item.id,
			}))];


		}
	};

	// 风格
	const queryStyleeData = async () => {
		const res = await type_list({});
		if (res.code === 1) {
			styleListData.value = [{
				label: '全部',
				value: ''
			}, ...res.data.style_list.map(item => ({
				label: item.name,
				value: item.id,
			}))];

		}
	};


	// 筛选条件的处理函数
	// const oncheck1 = (selectedValue) => {
	// 	updateParams('cat_id', selectedValue, selectedCatLabel1, catListData);
	// };
	const oncheck2 = (selectedValue) => {
		updateParams('style', selectedValue, selectedCatLabel2, styleListData);
	};
	const oncheck3 = (selectedValue) => {
		updateParams('work_year', selectedValue, selectedCatLabel3, workListyear);
	};

	const updateParams = (key, selectedValue, labelRef, dataList) => {
		params.value[key] = selectedValue;
		const selectedItem = dataList.value.find(item => item.value === selectedValue);
		if (selectedItem) {
			labelRef.value = selectedItem.label;
		}
		params.value.page = 1
		arrList.value = [];
		queryList();
	};

	// 请求数据列表
	const queryList = async () => {
		isLoading.value = true; // 设置加载中
		try {
			const res = await find_designer(params.value);
			if (res.code === 1) {
				if (params.value.page === 1) {
					arrList.value = res.data.list;
				} else {
					arrList.value.push(...res.data.list);
				}
				// 判断是否还有更多数据
				if (res.data.list.length < params.value.page_size) {
					hasMoreData.value = false; // 没有更多数据
				} else {
					hasMoreData.value = true; // 还有更多数据
				}
				arrList.value.forEach((item) => {
					if (item.style_text != "") {
						item.style_text_arr = item.style_text.split(",");
						if (item.style_text_arr.length > 4) {
							item.style_text_arr = item.style_text_arr.slice(0, 4);
							item.style_text_arr.push("...");
						}
					} else {
						item.style_text_arr = [];
					}
				});
				params.value.page += 1; // 页码递增
			}
			setTimeout(() => {
				isLoading.value = false;
			}, 500);
		} catch (error) {
			console.error('请求数据失败:', error);
		} finally {
			isLoading.value = false; // 加载完成

		}
	}

	// 重置查询条件并重新加载数据
	const update = () => {
		params.value.style = '';
		// params.value.work_type = '';
		params.value.work_year = '';
		params.value.page = 1;
		queryList();
	};

	// 去详情
	const onDetails = (id) => {
		uni.navigateTo({
			url: '/pages/designer/designerDetails/index?id=' + id
		});
	}

	// 对外暴露方法
	defineExpose({
		queryList,
		params,
		update,
		hasMoreData,
	});
</script>
<style scoped lang="less">
	.fixed{
		position: fixed !important;
		left: 0 !important;
		width: 100% !important;
		z-index: 999 !important;
		background-color: #fff;
	}
	.findCases {
		width: 100%;
		height: 100%;

		.screen {
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;
			// border-bottom: 1rpx solid #E4E4E4;
		}

		.nullData {
			height: calc(100% - 110rpx);
		}

		.list {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			padding: 10px 20rpx 0;
			box-sizing: border-box;


			.card {
				display: flex;
				flex-wrap: wrap;
				padding: 40rpx 0rpx;
				// margin-bottom: 25rpx;
				background-color: #fff;
				width: 100%;
				// height: 355rpx;
				border-bottom: 1rpx solid #E4E4E4;
				// border-bottom: 1rpx solid #E4E4E4;
				box-sizing: border-box;

				// &:-child {
				// 	border-bottom: 0;
				// }

				.rows {
					width: 100%;
					display: flex;


					.userAvatar {
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: flex-start;
						width: 120rpx;

						image {
							width: 90rpx;
							height: 90rpx;
							background: #E3E3E3;
							border-radius: 50%;
							object-fit: cover;
						}
					}


					.rightFlex {
						width: calc(100% - 120rpx);
						display: flex;
						flex-wrap: wrap;
						align-content: flex-start;

						.userInfo {
							width: 100%;
							display: flex;

							.rowCenter {
								flex: 1;
								padding: 0 10rpx;
								box-sizing: border-box;

								.name {
									font-weight: 500;
									font-size: 30rpx;
									color: #333333;
									line-height: 30rpx;
									text-align: left;
									font-style: normal;
									display: -webkit-box;
									-webkit-line-clamp: 1;
									-webkit-box-orient: vertical;
									overflow: hidden;
								}

								.number {
									width: 100%;

									font-weight: 400;
									font-size: 24rpx;
									color: #7A7A7A;
									line-height: 30rpx;
									text-align: left;
									font-style: normal;
									margin: 10rpx 0;

									display: -webkit-box;
									-webkit-line-clamp: 1;
									-webkit-box-orient: vertical;
									overflow: hidden;
								}

								.tag {
									display: flex;
									width: 100%;
									overflow: hidden;

									.tags {
										// height: 40rpx;
										min-width: 60rpx;
										padding: 8rpx 10rpx;
										background: #FFFFFF;
										border-radius: 4rpx;
										border: 1rpx solid #EAC285;
										font-weight: 400;
										font-size: 24rpx;
										color: #D5A969;
										margin-left: 12rpx;
										display: flex;
										justify-content: center;
										box-sizing: border-box;

										&:first-child {
											margin-left: 0;
										}
									}
								}

							}

							.rightRow {
								width: 120rpx;
								display: flex;

								.btns {
									width: 160rpx;
									height: 60rpx;
									background: linear-gradient(113deg, #F2BD6F 0%, #CCA05F 100%);
									border-radius: 8rpx;

									font-family: Source Han Sans CN, Source Han Sans CN;
									font-weight: 500;
									font-size: 25rpx;
									color: #FFFFFF;
									line-height: 60rpx;
									text-align: center;
									font-style: normal;
									text-transform: none;
								}
							}
						}

						.imageList {
							margin-top: 20rpx;
							width: 100%;
							display: flex;
							align-items: center;

							image {
								width: 185rpx;
								height: 125rpx;
								object-fit: cover;
								background-color: #E4E4E4;
								border-radius: 6rpx 6rpx 6rpx 6rpx;
								margin-right: 20rpx;

								&:last-child {
									margin-right: 0;
								}
							}
						}
					}
				}

			}
		}

		.load-more-box {
			text-align: center;
			width: 100%;
			padding-top: 20rpx;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			color: #7A7A7A;
		}

	}
</style>